const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  // 在打包之前使用这个插件尝试清除dist目录下的文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: {
        main: ["babel-polyfill", './src/main.js']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',  //将vue里面的css代码写到js里面去
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'  // 提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
                ]
            },
            {
                test: /\.(gif|jpg|png|svg|jpeg)$/,
                loader: 'url-loader',//url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader
                exclude: /node_modules/,    // 忽略第三方的任何代码
                options: {
                    limit: 8192,  //小于10kB的图片进行base64编码
                    name: 'images/[name].[hash].[ext]',
                    esModule: false, //解决img属性src="[object Module]"
                }
            }, {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '面试题'
        }),
        new VueLoaderPlugin(), // make sure to include the plugin for the magic
    ]
}